<dev xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">
    <c:set var="root" value="#{request.contextPath}" />

    <ui:composition template="../template/common.xhtml" >
        <ui:define name="topComponents">
            <c:set var="activeItem" value="productPage"/>
            <ui:include src="../navigator.xhtml" />
        </ui:define>
        <ui:define name="content">
            <div class="span12">
                <div class="well">
                    <h:form id="f">
                        <p:dataTable id="catetoryList" var="cate" value="#{categoryBrowseCtrl.categories}" rowKey="#{cate.id}"
                                     selection="#{categoryBrowseCtrl.selectedCategory}" selectionMode="single">
                            <f:facet name="header">Categories</f:facet>
                            <p:ajax event="rowSelect" listener="#{categoryBrowseCtrl.onRowSelect}" update=":ft:productTypeList"></p:ajax>
                            <p:column headerText="Id">
                                #{cate.id}
                            </p:column> 
                            <p:column headerText="Name">
                                #{cate.name}
                            </p:column>

                            <f:facet name="footer">
                                <p:commandButton id="newButton" value="New" onclick="dlgCreateCategory.show()" />
                                <p:commandButton id="editButton" value="Edit" onclick="dlgUpdateCategory.show()" />
                                <p:commandButton id="deleteButton" value="Delete" action="#{categoryBrowseCtrl.delete()}" update=":catetoryList"  ajax="false"  />
                            </f:facet>
                        </p:dataTable>
                    </h:form>
                </div>
            <p:dialog header="Create category" widgetVar="dlgCreateCategory" resizable="false">
                <h:form id="formCreate">

                    <h:panelGrid columns="2" style="margin-bottom:10px">
                        <h:outputLabel for="categoryName" value="Name:" />
                        <p:inputText id="categoryName" value="#{categoryCuCtrl.ACategoryName}" />
                    </h:panelGrid>

                    <p:commandButton id="submitButton" value="Submit" action="#{categoryCuCtrl.aCreateCategory()}" update=":f:catetoryList" oncomplete="dlgCreateCategory.hide();"/>

                </h:form>
            </p:dialog>
            <p:dialog header="Edit category" widgetVar="dlgUpdateCategory" resizable="false">
                <h:form id="formUpdate">

                    <h:panelGrid columns="2" style="margin-bottom:10px">
                        <h:outputLabel for="categoryName" value="Name:" />
                        <p:inputText id="categoryName" value="#{categoryCuCtrl.ACategoryName}" />
                    </h:panelGrid>

                    <p:commandButton id="submitButton" value="Submit" action="#{categoryCuCtrl.aUpdateCategory()}" update=":f:catetoryList" oncomplete="dlgUpdateCategory.hide();"/>

                </h:form>
            </p:dialog>
                <div class="well">
                    <h:form id="ft">
                        <p:dataTable id="productTypeList" var="pro" value="#{productTypeBrowseCtrl.types}" rowKey="#{pro.id}" selectionMode="single"
                                     selection="#{productTypeBrowseCtrl.selectedType}" >
                            <f:facet name="header">Product types</f:facet>
                            <p:ajax event="rowSelect" listener="#{productTypeBrowseCtrl.onRowSelect}" ></p:ajax>
                            <p:column headerText="Id">
                                #{pro.id}
                            </p:column> 
                            <p:column headerText="Name">
                                #{pro.name}
                            </p:column>

                            <f:facet name="footer">
                                <p:commandButton id="newButton" value="New" onclick="dlgCreateType.show()" />
                                <p:commandButton id="editButton" value="Edit" onclick="dlgUpdateType.show()" />
                                <p:commandButton id="deleteButton" value="Delete" action="#{productTypeBrowseCtrl.delete()}" update=":productTypeList"  ajax="false"  />
                            </f:facet>
                        </p:dataTable>
                    </h:form>
                </div>
            </div>
            <p:dialog header="Create product type" widgetVar="dlgCreateType" resizable="false">
                <h:form id="formCreateType">
                    <h:panelGrid columns="2" style="margin-bottom:10px">
                        <h:outputLabel for="categoryName" value="Name:" />
                        <p:inputText id="categoryName" value="#{productTypeBrowseCtrl.AProductTypeName}" />
                    </h:panelGrid>
                    <p:commandButton id="submitButton" value="Submit" action="#{productTypeBrowseCtrl.aCreate()}" update=":ft:productTypeList" oncomplete="dlgCreateType.hide();"/>
                </h:form>
            </p:dialog>
            <p:dialog header="Edit product type" widgetVar="dlgUpdateType" resizable="false">
                <h:form id="formUpdateType">
                    <h:panelGrid columns="2" style="margin-bottom:10px">
                        <h:outputLabel for="categoryName" value="Name:" />
                        <p:inputText id="categoryName" value="#{productTypeBrowseCtrl.AProductTypeName}" />
                    </h:panelGrid>
                    <p:commandButton id="submitButton" value="Submit" action="#{productTypeBrowseCtrl.aUpdate()}" update=":ft:productTypeList" oncomplete="dlgUpdateType.hide();"/>
                </h:form>
            </p:dialog>

        </ui:define>
    </ui:composition>

</dev>